import React, { useState } from 'react';
import { Modal } from '@/components';
import { TextareaItem, Button, Toast } from 'antd-mobile';
import { useLocation } from 'umi';

const Footer: React.FC = (props) => {
  const [show, setShow] = useState(false);
  const [commentsValue, setCommentsValue] = useState<any>('');

  const handleClick = () => {
    setShow(true);
  };

  const handleClose = () => {
    setShow(false);
  };

  const handleChange = (value: any) => {
    setCommentsValue(value);
  };

  const handleSubmit = () => {
    if (commentsValue) {
      handleClose();
    } else {
      Toast.fail('请添加信息');
    }
  };
  return (
    <>
      <div className="footer" onClick={handleClick}>
        评论~
      </div>
      <Modal
        show={show}
        styleBody={{
          height: '220px',
          bottom: '0px',
          top: 'unset',
        }}
        onClose={handleClose}
      >
        <div className="modal-comment">
          <TextareaItem rows={2} count={200} onChange={handleChange} />
          <Button className="comment-btn" type="warning" onClick={handleSubmit}>
            评论
          </Button>
        </div>
      </Modal>
    </>
  );
};

export default Footer;
